<template>
<div class="app">
  <el-collapse v-model="activeNames"
               accordion>
    <el-collapse-item title="新书推荐" name="1">
      <div>
        新书推荐
      </div>
      <RecommendNewComponent :page-size="6"/>
    </el-collapse-item>

    <el-collapse-item title="热门推荐" name="2">
      <div>热门推荐</div>
      <RecommendHotComponent :page-size="6"/>
    </el-collapse-item>
    <el-collapse-item title="免费推荐" name="3">
      <div>免费推荐</div>
      <RecommendFreeComponent :page-size="6"/>
    </el-collapse-item>
    <el-collapse-item title="完本推荐" name="4">
      <div>小编推荐</div>
      <RecommendFullComponent :page-size="6"/>
    </el-collapse-item>
  </el-collapse>
</div>
</template>

<script>
import RecommendPage from "@/views/SearchPage";
import RecommendHotComponent from "@/components/book/hot/RecommendHotComponent";
import RecommendNewComponent from "@/components/book/new/RecommendNewComponent";
import RecommendFreeComponent from "@/components/book/free/RecommendFreeComponent";
import RecommendFullComponent from "@/components/book/full/RecommendFullComponent";
export default {
  name: "ExploreComponent",
  components: {
    RecommendFullComponent,
    RecommendFreeComponent, RecommendNewComponent, RecommendHotComponent, RecommendPage},
  props: {},
  data() {
    return {
      activeNames : ['1']
    }
  }, methods: {}, watch: {}, computed: {}
}
</script>

<style scoped>

</style>